<template>
	<view>
		<header-box></header-box>
		<view class="content">
			<view class="card" :class="{card1:tabIndex == 1}">
				<view class="top flex">
					<view @click="tabIndex = 0"></view>
					<view @click="tabIndex = 1"></view>
				</view>
				<view class="bottom flex-center">
					<text>VDS</text> 3000枚
				</view>
			</view>
			<button class="btn flex-center">加入</button>
		</view>
		<footer-box tabIndex="1"/>
	</view>
</template>

<script>
	import HeaderBox from '@/components/headerBox.vue'
	import FooterBox from '@/components/footerBox.vue'
	export default {
		components:{
			HeaderBox,FooterBox
		},
		data() {
			return {
				tabIndex:0
			};
		}
	}
</script>

<style lang="less">
	.card{
		height: 310rpx;
		background: url('/static/join-bg0.png') no-repeat 0 0;
		background-size:100% 100%;
		overflow: hidden;
		margin: 80rpx 0 300rpx;
		&.card1{
			background-image: url('/static/join-bg1.png');
		}
		.top{
			view{
				width: 50%;
				height:70rpx;
			}
		}
		.bottom{
			height:240rpx;
			font-size: 60rpx;
			color: #ffffff;
			text{
				position: relative;
				top:10rpx;
				font-size: 30rpx;
				margin-right: 10rpx;
			}
		}
	}
	.btn{
		width: 614rpx;
		height: 94rpx;
		background: url('/static/login-btn.png') no-repeat 0 0;
		background-size: 100% 100%;
		font-size: 34rpx;
		color: #ffffff;
		margin-top: 130rpx;
	}
	
</style>
